<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>表单</title>
  <style>
    div {
      margin: 10px 0;
    }
  </style>
</head>
<body>

<div id="app">
  <div>
    <label for="name">
      姓名：
      <input type="text" id="name" v-model="form.name"/>
    </label>
  </div>

  <div>
    性别：
    <input type="radio" id="male" name="sex" value="1" v-model="form.sex">
    <label for="male">男</label>

    <input type="radio" id="female" name="sex" value="2" v-model="form.sex">
    <label for="female">女</label>
  </div>

  <div>
    爱好：
    <input type="checkbox" id="basketball" value="basketball" v-model="form.hobby">
    <label for="basketball">篮球</label>

    <input type="checkbox" id="sing" value="sing" v-model="form.hobby">
    <label for="sing">唱歌</label>

    <input type="checkbox" id="coding" value="coding" v-model="form.hobby">
    <label for="coding">写代码</label>
  </div>

  <div>
    <label for="job">职业：</label>
    <!--    单选时是一个int值，多选时是int数组-->
    <select name="" id="job" v-model="form.job" multiple>
      <option value="0">请选择</option>
      <option value="1">建筑师</option>
      <option value="2">程序员</option>
    </select>
  </div>

  <div>
    <label for="introduce">个人简介：</label>
    <textarea id="introduce" v-model="form.introduce"></textarea>
  </div>

  <div>
    <button @click="submit">提交</button>
  </div>

  <pre>
    {{form}}
  </pre>
</div>

<script src="../lib/vue.js"></script>
<script>
  let vm = new Vue({
    el: '#app',
    data: {
      form: {
        name: '',
        sex: '',
        hobby: [],
        job: [],
        introduce: ''
      },
    },
    methods: {
      submit() {
        console.log(this.form)
      }
    }
  })
</script>


</body>
</html>